<template>
	<view class="_tbody">
		<!-- 轮播图 -->
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			v-if="gallery!=''">
			<swiper-item class=" banner-item" v-for="item in gallery" :key="item.id">
				<image class="banner-image" :src="item.img_url" mode="widthFix">
				</image>
			</swiper-item>

		</swiper>

		<!-- 小标题 -->
		<view class="return">
			<view class="return-item" v-for="item,index in returnList" :key="index">
				<image src="../../static/正确实心.png" mode="widthFix"></image>
				<span>{{item}}</span>
			</view>
		</view>

		<!-- 大标题 -->
		<view class="info">
			<view class="big">{{info.name}}</view>
			<view class="small">{{info.goods_brief }}</view>
			<view class="price">{{info.retail_price | priceFormat}}</view>
		</view>

		<!-- 弹出层 -->
		<view class="eject" @tap="show=true">
			<view class="content">
				<view class="text">展示弹出层</view>
				<view class="image">
					<image src="../../static/向右1.png" mode="widthFix"></image>
				</view>
			</view>

		</view>

		<!-- 商品参数 -->
		<view class="attribute" v-if="attribute!=''">
			<view class="attribute-title">商品参数</view>
			<view class="attribute-content">
				<view class="attribute-item" v-for="item,index in attribute" :key="index">
					<view class="attribute-name">{{item.name}}</view>
					<view class="attribute-value">{{item.value}}</view>
				</view>
			</view>
		</view>

		<view class="attribute-title2" v-else>商品参数</view>

		<!-- 商品信息 -->
		<view class="goods_desc">
			<rich-text :nodes="info.goods_desc"></rich-text>
		</view>

		<!-- 常见问题 -->
		<view class="issue">
			<view class="title">
				<view class="title-left"></view>
				<view class="title-mid">常见问题</view>
				<view class="title-right"></view>
			</view>
			<view class="issue-item" v-for="item in issue" :key="item.id">
				<view class="qusetion">
					<span>·</span>
					{{item.question}}
				</view>
				<view class="answer">{{item.answer}}</view>
			</view>
		</view>

		<!-- 相关产品 -->
		<view class="related">
			<view class="title">
				<view class="title-left"></view>
				<view class="title-mid">相关产品</view>
				<view class="title-right"></view>
			</view>
			<customList :list="goodsList"></customList>
		</view>


		<!-- 购买/添加 -->

		<view class="bottom">
			<view class="tabbar">
				<u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false"
					:safeAreaInsetBottom="false" :border="false">
					<!-- <u-tabbar-item text="未收藏" icon="star" open-type="share"></u-tabbar-item> -->

					<button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
						<u-icon name="zhuanfa"></u-icon>分享
					</button>
					<u-tabbar-item text="购物车" icon="shopping-cart" badge="1"></u-tabbar-item>

				</u-tabbar>
			</view>
			<u-popup :show="show" @close="close" class="mypopabc">
				<view class="goodsinfo_area">
					<view class="goodsimg">
						<image class="goodsimgimg" :src="info.primary_pic_url" mode="widthFix"></image>
					</view>
					<view class="goodsinfo">
						<view>价格：{{ info.retail_price }}</view>
						<view>库存：{{ info.goods_number }}</view>
					</view>
				</view>
				<view class="">
					数量：
					<u-number-box v-model="value" @change="valChange" :min="1" :max="info.goods_number"></u-number-box>
				</view>
			</u-popup>
			<view class="button">
				<view class="buy" @tap="show=false">立即购买</view>
				<view class="add" @tap="show=true">加入购物车</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsDetail,
		goodsRelated
	} from "@/utils/api.js"
	import customList from '@/components/custom-list/custom-list.vue'
	export default {
		data() {
			return {
				value2: 1,
				value: 0,
				returnList: ["30天无忧退货", "48小时快速退费", "满88元免邮费"],
				info: [],
				attribute: "",
				gallery: "",
				issue: [],
				productList: [],
				goodsList: [],
				show: false
			}
		},
		methods: {
			close() {
				this.show = false
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}
		},
		components: {
			customList
		},
		async onLoad(id) {
			console.log(id.id);
			let res = await goodsDetail(id)
			let {
				info,
				attribute,
				gallery,
				issue,
				productList
			} = res.data
			this.gallery = gallery
			this.info = info
			info.goods_desc = info.goods_desc.replace(/<img/g, "<img style='display: block; width: 100%;'");
			this.attribute = attribute
			this.issue = issue
			this.productList = productList
			console.log(res);
			let res2 = await goodsRelated(id)
			let {
				goodsList
			} = res2.data
			this.goodsList = goodsList
			// console.log(res2);
			const htmlSnip =
				`${info.goods_desc}`
		},
	}
</script>

<style lang="scss">
	._tbody {
		background-color: #efefef;
		padding-bottom: 100rpx;

		// 轮播图
		.banner {
			width: 750rpx;
			height: 750rpx;

			.banner-item {
				width: 100%;

				.banner-image {
					width: 100%;

					image {
						width: 100%;
					}
				}
			}
		}

		// 小标题
		.return {
			display: flex;
			padding: 23rpx 18rpx 18rpx 17rpx;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.return-item {
				span {
					font-size: 23rpx;
					width: 40rpx;
				}

				image {
					width: 26rpx;
					vertical-align: middle;
				}
			}
		}

		// 大标题
		.info {
			text-align: center;
			border-bottom: 2rpx solid #ccc;
			height: 320rpx;
			box-sizing: border-box;
			background-color: #fff;
			padding-top: 62rpx;

			.big {
				font-size: 35rpx;
			}

			.small {
				font-size: 26rpx;
				margin-top: 49rpx;
			}

			.price {
				font-size: 23rpx;
				margin-top: 56rpx;
			}
		}

		// 弹出层
		.eject {
			background-color: #fff;

			.content {
				display: flex;
				justify-content: space-between;
				width: 686rpx;
				margin: 0 auto;
				height: 88rpx;
				line-height: 88rpx;
				border-bottom: 1rpx solid #efefef;
				box-sizing: border-box;

				.text {
					font-size: 26rpx;
				}

				.image {
					image {
						width: 30rpx;
						vertical-align: middle;
					}
				}
			}
		}

		// 商品参数
		.attribute {
			background-color: #fff;
			width: 750rpx;
			margin: 0 auto;
			padding: 19.5rpx 10rpx 0 10rpx;
			margin-top: 60rpx;
			box-sizing: border-box;

			.attribute-title {
				margin-top: 5rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 37rpx;
				width: 750rpx;
				padding-left: 23rpx;
				margin: 0 auto;
			}

			.attribute-content {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				justify-content: space-between;
				height: 410rpx;
				padding-bottom: 33rpx;

				.attribute-item {
					width: 100%;
					display: flex;
					font-size: 27rpx;
					background-color: #efefef;
					border-radius: 13rpx;
					padding: 14.5rpx 0;
					box-sizing: border-box;

					.attribute-name {
						display: flex;
						flex-direction: row-reverse;
						color: #ccc;
						width: 170rpx;
						margin-right: 13rpx;
					}

					.attribute-value {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 529.62rpx;
					}
				}
			}
		}

		.attribute-title2 {
			margin-top: 60rpx;
			width: 750rpx;
			background-color: #fff;
			height: 120rpx;
			line-height: 120rpx;
			padding-left: 23rpx;
			font-size: 37rpx;
		}

		// 商品信息
		.goods_desc {
			background-color: #fff;
			width: 100%;

			p {
				width: 750rpx !important;
			}
		}

		// 带横线标题
		.title {
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			position: relative;

			.title-mid {
				font-size: 36rpx;
			}

			.title-left {
				position: absolute;
				width: 75rpx;
				height: 4rpx;
				top: 50%;
				transform: translateY(-50%);
				right: 188rpx;
				background-color: #ccc;
			}

			.title-right {
				position: absolute;
				width: 75rpx;
				height: 4rpx;
				top: 50%;
				transform: translateY(-50%);
				left: 188rpx;
				background-color: #ccc;
			}
		}

		// 常见问题
		.issue {
			margin-top: 19rpx;
			background-color: #fff;
			position: relative;
			height: 625rpx;

			.qusetion {
				display: flex;
				align-items: center;
				height: 80rpx;
				font-size: 32rpx;

				span {
					font-size: 80rpx;
					width: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: darkred;
				}
			}

			.answer {
				font-size: 25rpx;
				color: #666;
				padding: 0 40rpx;
				height: 55rpx;
			}
		}

		// 相关产品

		.related {
			background-color: #fff;
		}

		// 底部栏
		.bottom {

			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;

			.tabber {
				width: 200rpx;


			}

			.button {
				width: 550rpx;
				display: flex;
				height: 100rpx;
				align-items: center;


				.buy {
					text-align: center;
					width: 270rpx;
					height: 80rpx;
					line-height: 80rpx;
					color: #fff;
					font-size: 27rpx;
					background: linear-gradient(to right, #fe5e33, #ee0b24);
					border-radius: 50rpx 0 0 50rpx;
				}

				.add {
					text-align: center;
					width: 270rpx;
					height: 80rpx;
					line-height: 80rpx;
					color: #fff;
					font-size: 27rpx;
					background: linear-gradient(to right, #ffd91e, #ff8917);
					border-radius: 0 50rpx 50rpx 0;
				}
			}
		}

		.u-tabbar-item {
			width: 100rpx;
		}

		.mypopabc {


			.u-popup__content {
				bottom: 90rpx !important;

			}

			/deep/ .u-transition {
				bottom: 100rpx !important;


				.goodsinfo_area {
					display: flex;
					padding: 20rpx 20rpx 50rpx 20rpx !important;


					.goodsimg {
						flex: 0;
						min-width: 200rpx;
						width: 100%;

						.goodsimgimg {
							width: 100%;
						}
					}

					.goodsinfo {
						flex: 1;
						margin-top: 20rpx;
						margin-left: 20rpx;
						font-size: 27rpx;
						height: 100rpx;
						line-height: 100rpx;
					}
				}
			}
		}
	}
</style>
